<!--
 * @description  : 市管-日计划终止审批列表展示组件
 * @descriptionDetail: 市管-日计划终止审批列表展示组件
 * @copyright    : 浙江烟草
 * @author       : sy
 * @create       : 2022-09-06 18:57:44
-->
<template>
  <view style="padding: 5px 10px;">
    <view @click.native="handlerPlanDetail()">
      <u-row gutter="24" class="main-part">
        <u-col span="8" class="main-title">
          {{ plan.dayPlanTypeName }}
        </u-col>
        <u-col span="4">
          <view :class="'status status-' + plan.approvalStatus">
            {{ plan.approvalStatusName }}
          </view>
        </u-col>
      </u-row>
      <u-row gutter="16">
        <u-col span="4">
          <view class="part-item-info">
            <view class="sub-title">
              计划日期
            </view>
            <view class="main-info">
              {{ plan.planDate }}
            </view>
          </view>
        </u-col>
        <u-col span="4">
          <view class="part-item-info">
            <view class="sub-title">
              发起人
            </view>
            <view class="main-info">
              {{ plan.personName }}
            </view>
          </view>
        </u-col>
        <u-col span="4">
          <view class="part-item-info">
            <view class="sub-title">
              终止原因
            </view>
            <view class="main-info">
              {{ plan.applyReasonName }}
            </view>
          </view>
        </u-col>
        <u-col span="4">
          <view class="part-item-info">
            <view class="sub-title">
              审批结论
            </view>
            <view class="main-info">
              {{ plan.approvalResult == '0'?'驳回':'同意' }}
            </view>
          </view>
        </u-col>
        <u-col span="4">
          <view class="part-item-info">
            <view class="sub-title">
              计划检查户数
            </view>
            <view class="main-info">
              {{ plan.planCheckNum }}户
            </view>
          </view>
        </u-col>		
        <u-col span="4">
          <view class="part-item-info">
            <view class="sub-title">
              已检查户数
            </view>
            <view class="main-info">
              {{ plan.checkedNum }}户
            </view>
          </view>
        </u-col>        
        <u-col span="12">
          <view class="op-checker">
            执行人：{{ plan.checkers }}
          </view>
        </u-col>
      </u-row>
    </view>
    <u-row gutter="16" class="oper-sty">
      <!-- 审批-->
      <u-col span="6" v-if="plan.approvalStatus == '02'"> 
        <u-icon name="file-text-fill" :color="$theme.u_type_primary" size="36" label="审批" @click="approvalPlan"></u-icon>
      </u-col>
    </u-row>
  </view>
</template>
<script>
import checkService from "@/service/check/check.service";
export default {
  name: "DayPlanStopItem",
  props: {
    plan: {
      type: Object,
      default: () => {},
    },
  },
  data(){
    return{

    } 
  },
  watch: {
    plan: {
      immediate: true,
      handler() {
        this.$forceUpdate();
      },
    },
  },
  methods:{
    // 点击查看计划详情
    handlerPlanDetail() {
      this.setRouteParam(this.plan);
      this.handlerAddPlan();
    },
    handlerAddPlan() {
      this.$u.route('/pages/check/addDayPlan');
    },
    approvalPlan(){
      this.setRouteParam(this.plan);
      this.$u.route('/pages/check/dayPlanStopApproval');
    },
  },
}
</script>
<style lang="scss" scoped>
.main-part {
  padding-bottom: 10px;
  .main-title {
    font-size: 15px;
    font-weight: 600;
    color: $u-main-color;
  }
  .status {
    padding: 2px;
    width: 65px;
    text-align: center;
    border-radius: 15px;
    float: right;
    font-size: 14px;
  }
  // 灰色
  .status-01 {
    color: $u-type-info;
    border: 1px solid $u-type-info;
  }
  // 蓝色
  .status-02 {
    color: $u-type-primary;
    border: 1px solid $u-type-primary-dark;
  }
  // 绿色
  .status-03 {
    color: $u-type-success;
    border: 1px solid $u-type-success-dark;
  }
}
.part-item-info {
  text-align: left;
  .sub-title {
    color: $u-tips-color;
    padding-bottom: 5px;
    font-size: 14px;
  }
  .main-info {
    color: $u-content-color;
    font-weight: 600;
    margin-bottom: 5px;
  }
}
.op-checker {
  padding: 8px 5px;
  background-color: #ecf2fd;
  border-radius: 5px;
  color: $u-content-color;
}
.oper-sty{
  padding: 15px 0px;
}
</style>